<template>
	<div class="">
		<loading v-if="isloading"></loading>
		<!--<base-header></base-header>-->
		<div class="brace-bg"></div>
		<h2 class="brace-type-title text-center">请选择牙套类型</h2>		
		<ul class="brace-type-ul">
			<li v-for="type in list" @click="nextStep(type.id)" class="brace-type-li">
				<img class="brace-type-img" :src="url + (type.thumb_path) + (type.thumb)" />
				<span class="brace-type-name">{{type.name}}</span>
			</li>
		</ul>		
	</div>
</template>

<script>
	import BaseHeader from "@/components/common/BaseHeader"
	import Loading from "@/components/common/Loading"
	export default {
		name: 'BraceType',
		components: {
			BaseHeader,
			Loading
		},
		data() {
			return {
				url: '',
				oss_url: '',
				list: [],
				isloading: true
			}
		},
		mounted() {
			this.getBraceType();
		},
		methods: {
			//获取牙套类型列表
			getBraceType() {
				var self = this;
				var data = {};
				$.get(global.domain + global.API.braces_category_list, data, function(msg) {
					self.isloading = false;
					if(msg.error == 0) {
						self.list = msg.data;
						self.url = msg.url;
						self.oss_url = msg.oss_url;
					} else {
						console.log(msg.error);
					}
				}, 'json');
			},
			//下一步
			nextStep(cid) {
				localStorage.setItem('cid', cid);
				this.$router.push({
					name: 'SeleteBrace',
					params: {
						cid
					}
				});
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	@import "../../style/brace.css";
</style>